<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="packtag" prefix="pack" %>
<c:set var="ctx" value="${pageContext.request.contextPath }"/>

<%--
  活动报名页面
  User: kent
  Date: 15/10/21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <pack:style>
        <src>/static/weui/css/weui.min.css</src>
        <src>/static/css/activity/style.css</src>
        <src>/static/sweetalert/sweetalert.css</src>
    </pack:style>

    <pack:script>
        <src>/static/wx/wx.js</src>
        <src>/static/zepto/zepto.min.js</src>
        <src>/static/sweetalert/sweetalert.min.js</src>
    </pack:script>

    <title>活动报名</title>
    <script>
        wx.config(${config});

        wx.ready(function () {
            wx.onMenuShareAppMessage({
                title: '我向房东打白条', // 分享标题
                desc: '你租房，我交租！疯狂接力，抢互助金服租+房租抵用券，最高可抵万元房租', // 分享描述
                link: '${shareUrl}', // 分享链接
                imgUrl: '${shareImgUrl}', // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            wx.onMenuShareTimeline({
                title: '我向房东打白条', // 分享标题
                link: '${shareUrl}', // 分享链接
                imgUrl: '${shareImgUrl}', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            wx.hideMenuItems({
                menuList: ["menuItem:copyUrl"]
            });
        });
    </script>
</head>
<body ontouchstart>

<div class="wrapper">
    <div class="bg-img"><img src="<c:url value="/static/img/activity/tittle.jpg"/>"></div>

    <article class="weui_article">
        <p style="color: #ffffff">立即参与『我向房东打白条』活动,集10个好友接力即可获得『房租抵用券』,接力越多,抵用越多,快来参加吧!么么哒!</p>
    </article>

    <form>
        <div class="weui_cells weui_cells_form" style="margin: 0 15px">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="nickName" name="nickName" required class="weui_input" type="text" placeholder="请输入您的姓名或昵称"/>
                </div>
                <div class="weui_cell_ft">
                    <i class="weui_icon_warn"></i>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="mobile" name="mobile" required class="weui_input" type="tel" placeholder="请输入您的手机号" data-phone/>
                </div>
                <div class="weui_cell_ft">
                    <i class="weui_icon_warn"></i>
                </div>
            </div>
            <div id="mobileParent" class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="rent" name="rent" class="weui_input" type="number" placeholder="请输入您的月租金" required/>
                </div>
                <div class="weui_cell_ft">
                    <i class="weui_icon_warn"></i>
                </div>
            </div>
        </div>

        <input type="hidden" id="openid" name="openid" value="${openId}"/>
    </form>

    <article class="weui_article" style="margin: 0.5rem 0 0 0;padding: 0 15px;font-size: 0.75rem;color: #ffffff;">
        <h4 class="tip">提示:</h4>
        <section>
            <p>1.建议微信转发到朋友圈或转发朋友帮您接力;</p>

            <p>2.请填写真实姓名和本人有效手机号码,便于中奖礼品的顺利发放;</p>

            <p>3.每个微信用户仅可参加一次.</p>
        </section>
    </article>

    <div class="bd spacing" style="margin: 0 15px">
        <a href="javascript:void(0);" id="joinBtn" class="weui_btn btn-warning">报名参加</a>
    </div>

    <div class="rule" style="margin-top: 1.5rem">
        <img src="<c:url value="/static/img/activity/apply.png"/>">
    </div>
</div>
</body>
<script type="text/javascript" src="${ctx}/static/validator/validator.js"></script>
<script>

    $(function () {
        $("#joinBtn").on("click", submitHandler);
        $("#tipConfirmBtn").on("click", hiddenTipHandler);
        validator.validate();
    });

    function hiddenTipHandler() {
        $("#tip").hide();
    }

    //提交方法
    function submitHandler() {

        if (!validator.success()){
            return;
        }

        var $form = $("form");
        $.post('/rent/activity/participate',
                $form.serialize(),
                function (data) {
                    if (data.resultCode == '1000') {
                        var openid = $("#openid").val();
                        location.href = '${ctx}/activity/completeApply?openId=' + openid;
                    } else {
                        swal("提示", data.resultMsg, "error");
                    }
                });
    }
</script>
</html>
